<template>
      <a-descriptions
              title="事件详情"
              bordered
              :column="{ xxl: 4, xl: 4, lg: 4, md: 1, sm: 1, xs: 1 }"
      >
          <a-descriptions-item label="标题">{{event.title}}</a-descriptions-item>
          <a-descriptions-item label="作者">{{ event.user?.nickname }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{event.createTime}}</a-descriptions-item>
          <a-descriptions-item label="搜索指数">{{event.searchIndex}}</a-descriptions-item>

          <a-descriptions-item label="内容" :contentStyle="{textIndent:'2em'}">
            {{event.content}}
          </a-descriptions-item>
      </a-descriptions>

        <a-list
                class="comment-list"
                :header="`${pageinfo.total} 个回复`"
                item-layout="horizontal"
                :data-source="pageinfo.list"
        >
            <template #renderItem="{ item }">
                <a-list-item>
                    <a-comment :author="item.user.nickname" :avatar="'data:image/jpeg;base64,'+item.user.base64Data">
<!--                        <template #actions>-->
<!--                            <span v-for="(action, index) in item.actions" :key="index">{{ action }}</span>-->
<!--                        </template>-->
                        <template #content>
                            <p>
                                {{ item.content }}
                            </p>
                        </template>
                        <template #datetime>
                            <a-tooltip :title="item.createTime">
                                <span>{{ dayjs(item.createTime).fromNow()}}</span>
                            </a-tooltip>
                        </template>
                    </a-comment>
                </a-list-item>
            </template>
        </a-list>
    <a-row  :gutter="[16,16]">
        <a-col>
            <a-pagination
                    v-model:current="commentQuery.pageNum"
                    v-model:page-size="commentQuery.pageSize"
                    :page-size-options="pageSizeOptions"
                    :total="pageinfo.total"
                    show-size-changer
                    @showSizeChange="onShowSizeChange"
                    @change="onPageChange"
            >
            </a-pagination>
        </a-col>
        <a-col>
            <a-button type="primary" @click="addCommentModalIsShow=true">添加评论</a-button>
        </a-col>
    </a-row>

  <!-- 添加事件模态框 -->
    <a-modal v-model:open="addCommentModalIsShow" title="添加评论" @ok="addComment" @cancel="closeModal">
        <a-textarea v-model:value="commentAdd.content" placeholder="请输入您的评论" :rows="4" />
    </a-modal>
</template>

<script setup>
import axios from 'axios'
import utils from '@/utils/utils.js';
import {computed, onMounted, reactive, ref} from "vue";
import { useRoute } from 'vue-router'
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useUserStore } from '../stores/user';
import { message } from 'ant-design-vue';

const userStore  = useUserStore()

dayjs.extend(relativeTime);
const route = useRoute()

const event = ref({
    id:0
})

const pageinfo = ref({})

const commentAdd = ref({
    content: "",
    eventId: 0,
})

const commentQuery = ref({
    pageNum:1,
    pageSize:3,
})

const loadevent =()=>{
    axios.get(`/event/one/${event.value.id}`).then(res => {
        event.value = res.data.data
        commentAdd.value.eventId = event.value.id
    })
}
const loadcomments =() => {
    axios.get(`/comment/list/?eventId=${event.value.id}&pageNum=${commentQuery.value.pageNum}&pageSize=${commentQuery.value.pageSize}`).then(res => {
        pageinfo.value = res.data.data
    })
}

onMounted(() => {
    event.value.id = route.params.eventId;
    loadevent();
    loadcomments()
})



const usePagination = () => {
//分页逻辑
    const pageSizeOptions = ['3', '5', '10'];
// const current = ref(1);
    const pageSizeRef = ref(3);
    const onShowSizeChange = (current, pageSize) => {
        console.log(current, pageSize);
        pageSizeRef.value = pageSize;
    };

    const onPageChange = (page, pageSize) => {
        commentQuery.value.pageNum = page;
        commentQuery.value.pageSize = pageSize;
        loadcomments()
    }

    return {pageSizeOptions,onPageChange,onShowSizeChange};
}

const useAddComment = () => {
    const addCommentModalIsShow = ref(false)


    const closeModal = ()=>{
        addCommentModalIsShow.value = false
        commentAdd.value = {
            content: "",
            eventId: 0,
        }
    }

    const addComment = ()=>{
        if(utils.isEmpty(userStore.user.id)){
            alert('请登录后发帖')
            return
        }
        commentAdd.value.eventId = event.value.id
        axios.post('/comment/add',commentAdd.value).then(res => {
            if(res.data.success) {

                loadcomments();
                commentAdd.value.content = ""
                message.success('评论成功');
                closeModal();
            }else{
                message.error('评论失败,'+res.data.message);
            }
        }).catch(reason => {
            console.log(reason.response)
            if(reason.response.status == 401){
                message.error("401 token失效");
            }

        })
    }
    return {addCommentModalIsShow,closeModal,addComment}
}




const {pageSizeOptions,onPageChange,onShowSizeChange} = usePagination();
const {addCommentModalIsShow,closeModal,addComment} = useAddComment();

</script>

<style scoped>

</style>